<template>
    <el-dialog width="35%" v-model="dialogVisible" :modal="true" @closed="finalThings" title="修改商家设置">
        <el-form :rules="rules" ref="elForm" :model="data" size="default">
            <el-form-item label="商家名称:" prop="merchant_name">
                <el-input type="text" v-model="data.merchant_name"></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="tel">
                <el-input type="text" v-model="data.tel"></el-input>
            </el-form-item>
            <el-form-item label="所在地址:" prop="m_address">
                <el-input type="text" v-model="data.m_address"></el-input>
            </el-form-item>
            <el-form-item label="选择区域:" prop="area">
                <el-cascader
                    placeholder="请选择地区"
                    size="default"
                    :options="areaSelectData"
                    @change="onAreaChange"
                    style="width:100%"
                    filterable
                    clearable
                    :props="{ value:'code',label:'name' }"
                >
                </el-cascader>
            </el-form-item>
            <el-form-item label="商家介绍:" prop="desc">
                <el-input type="textarea" v-model="data.desc"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" size="default" @click="onSaveBaseInfo()">保存</el-button>
            <el-button size="default" @click="onCancel()">取消</el-button>
        </template>
    </el-dialog>
 </template>
 
 <script>
 import { reactive,toRefs } from 'vue';
import { regionDataPlus } from '../../../uiframe/utils';
 
export default {
    props:{
        q:Object,
        _compId:Number,
        done:Function,
        payload: Object
    },
    setup(props){
        let data = reactive({
            dialogVisible:true,
            areaSelectData:regionDataPlus(null),
            data: {},
            elForm:null,
            rules:{
                merchant_name: [
                    { required: true, message: "商家名称必填", trigger: "blur" },
                    { min: 3, max: 20, message: "长度再3~20字符", trigger: "blur" },
                ],
                area: [{ required: true, message: "区域必选", trigger: "blur" }],
                desc:[{required:true,message:'描述必填', trigger:'blur'}],
                m_address: [{ required: true, message: "地址必填", trigger: "blur" }],
                tel:[{required:true,message:'电话号码必填', trigger:'blur'}]
            }
        })
        const methods = {
            onSaveBaseInfo:()=>{
                data.elForm.validate().then(ret => {
                    console.log('onSure', data.data)
                }).catch(res=>{})
            },
            onCancel: ()=>data.dialogVisible = false,
            finalThings: () =>props.done(props._compId),
            onAreaChange: (v) => {
                data.data.area = v ? v[v.length-1] : ''
            }
        }
        return {
            ...toRefs(data),
            ...methods
        }
    }
}
</script>